<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JSX技术</title>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    let child = React.createElement(
      'div',
      { className: 'box' },
      'ABC',
      'OPQ',
      'XYZ',
      React.createElement('button', {}, '按钮'),
      React.createElement(
        'div',
        null,
        '我是一个div',
        React.createElement('span', null, '我是一个span'),
      )
    );

    //可以直接通过id属性值获取到元素，等价于document.getElementById("app")
    //这不是React的语法，是DOM编程提供的功能
    let parent = ReactDOM.createRoot(app);

    parent.render(child)

  </script>
</body>

</html>